<template>
    <!--登录窗体模块-->
    <div id="loginFormArea">
        <el-form :model="loginForm" label-width="40px" style="padding:40px;">
            <el-form-item label="账号">
                <el-input v-model="loginForm.account"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="loginForm.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-checkbox></el-checkbox>
                <span style="margin-left:5px;color:#000000">记住我</span>
                <a href="" style="color:#00A1D6;margin-left:50px;">无法验证</a>
                <a href="" style="color:#00A1D6;margin-left:15px;">找回密码</a>
            </el-form-item>
            <el-row>
                <el-col :span="12">
                    <el-button type="primary" style="width:100%" @click="doLogin" :loading="loginLoading">登陆
                    </el-button>
                </el-col>
                <el-col :span="12">
                    <el-button plain style="float:right;width:calc(100% - 10px)" @click="doRegister">注册</el-button>
                </el-col>
            </el-row>
            <el-row style="padding-top:60px;margin-left:40px;font-size:14px;">
                <el-col>
                    <span style="margin-left:5px;color:#000000">登录即代表你同意</span>
                    <a href="" style="color:#00A1D6">用户协议</a>
                    <span style="margin-left:5px;margin-right:5px;color:#000000">和</span>
                    <a href="" style="color:#00A1D6">隐私政策</a>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "loginFormModule",
        data() {
            return {
                loginLoading:false,
                loginForm: {
                    account: 'xuhaodi.sdc',
                    password: 'password123'
                }
            }
        },
        methods:{
            doLogin(){
                //登录事件
                var self = this;
                self.loginLoading = true;
                self.$api.get('loginController/login',self.loginForm,result=>{
                    var result = result;
                    var successFlag = result.successFlag;
                    //登录成功
                    if(successFlag){
                        self.loginLoading = false;
                        self.$router.push('/redis/param');
                    }
                    //登录失败
                    if(!successFlag){
                        self.loginLoading = false;
                    }
                },error=>{
                    self.loginLoading = false;
                });
            },
            doRegister(){
                //注册事件
            }
        }
    }
</script>

<style scoped>
    #loginFormArea {
        width: 400px;
        height: 400px;
        /*background-color:red;*/
        /*在父元素中居中显示*/
        display: inline-block;
        /*背景色为白色*/
        background-color: #fff;
        /*透明度为0.9*/
        opacity: 0.9;
        /*边框为outset*/
        border: 1px outset darkgrey;
        /*边框阴影*/
        box-shadow: darkgrey 10px 10px 30px 5px;
        /*四个边框的弧度*/
        border-radius: 5px;
    }
</style>
